<template>
  <view class="settings-container">
    <scroll-view scroll-y class="scroll-view">
      <view class="content-area">
        <!-- 菜单列表 -->
        <view class="menu-list">
          <view class="menu-item" @click="goToLegalTerms">
            <view class="menu-text">法律条款与隐私政策</view>
            <view class="menu-arrow">
              <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>

          <view class="menu-item" @click="goToFeedback">
            <view class="menu-text">问题反馈</view>
            <view class="menu-arrow">
              <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>

          <view class="menu-item" @click="goToAboutUs">
            <view class="menu-text">关于我们</view>
            <view class="menu-arrow">
              <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>

          <view class="menu-item" @click="goToVersionUpdate">
            <view class="menu-text">版本更新</view>
            <view class="menu-arrow">
              <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>

          <view class="menu-item" @click="goToChangePassword">
            <view class="menu-text">修改密码</view>
            <view class="menu-arrow">
              <uv-icon name="arrow-right" size="16" color="#999"></uv-icon>
            </view>
          </view>
        </view>

        <!-- 退出账号按钮 -->
        <view class="logout-section">
          <uv-button
            type="primary"
            text="退出账号"
            size="large"
            :custom-style="logoutButtonStyle"
            @click="logout"
          ></uv-button>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {  throttleToLogin } from '@/api/utils'
// 退出按钮样式
const logoutButtonStyle = {
  backgroundColor: '#FF6B35',
  borderColor: '#FF6B35',
  borderRadius: '24rpx',
  height: '88rpx',
  fontSize: '32rpx',
  fontWeight: '600'
}

// 页面跳转方法
const goToLegalTerms = () => {
  uni.navigateTo({
    url: '/user/mine/toLegalTerms'
  })
}

const goToFeedback = () => {
  uni.navigateTo({
    url: '/user/mine/toFeedback'
  })
}

const goToAboutUs = () => {
  uni.navigateTo({
    url: '/user/mine/aboutUs'
  })
}

const goToVersionUpdate = () => {
  uni.navigateTo({
    url: '/user/mine/versionUpdate'
  })
}

const goToChangePassword = () => {
  uni.navigateTo({
    url: '/user/mine/changePassword'
  })
}

// 退出账号
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出账号吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '退出中...' })
        
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({ title: '已退出账号', icon: 'success' })
          throttleToLogin()
        }, 1000)
      }
    }
  })
}
</script>

<style lang="scss" scoped>



.content-area {
  padding: 32rpx;
}

// 菜单列表
.menu-list {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 48rpx;

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    transition: background-color 0.2s ease;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f8f9fa;
    }

    .menu-text {
      font-size: 32rpx;
      color: #333;
      font-weight: 500;
    }

    .menu-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 退出账号按钮区域
.logout-section {
    position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32rpx;
  background: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
}
</style>
